<template>
  <!-- 横向布局 -->
  <view class="row">
    <view class="box bg-blue">A</view>
    <view class="box bg-green">B</view>
    <view class="box bg-red">C</view>
  </view>
  <!-- 纵向布局 -->
  <view class="column">
    <view class="box bg-blue">D</view>
    <view class="box bg-green">E</view>
    <view class="box bg-red">F</view>
  </view>
  <!-- 其他布局 -->
  <!-- 居中 -->
  <view class="row other-box-center">
    <view class="item">横向布局-居中</view>
    <view class="item">横向布局-居中</view>
  </view>
  <view class="row other-box-right">
    <view class="item">横向布局-居右</view>
    <view class="item">横向布局-居右</view>
  </view>
</template>

<script>
	
</script>

<style>
	.box {
		height: 200upx;
		width: 33.3%;
		text-align: center;
		/*水平居中*/
		line-height: 200upx;
		/*行间距与框高度一致，实现垂直居中*/
		color: #FFFFFF;
		/*文本颜色*/
	}	
	.box2{
		height: 200upx;
	}
	.bg-red {
		background-color: #aa0000;
	}
	.bg-blue {
		background-color: #007AFF;
	}
	.bg-green {
		background-color: #4CD964;
	}
	.row {
		display: flex;
		flex-direction: row;
		/*默认横排显示*/
	}
	.coloum{
		display: flex;
		flex-direction: column-reverse;
	}
	/*其他布局的样式*/
	.item{
		height: 80upx;
		line-height: 80upx;
		background-color: #e3e3ea;
		margin: 10upx;
		padding: 10upx;
	}
	.other-box-center{
		justify-content: center;
		-webkit-justify-content:center;
	}
	.oter-box-right{
		justify-content: flex-end;
		-webkit-justify-content:flex-end;
	}
</style>
